<style lang="less" scoped>
.equipment-management {
  width: 100%;
  height: 100%;
  /deep/.el-table__inner-wrapper {
    height: 100% !important;
  }
  .pagination-css {
    padding: 5px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    justify-content: right;
    margin-top: 5px;
  }
}
</style>

<template>
  <div class="equipment-management">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline form-css"
    >
      <!-- <el-form-item label="项目点名称：">
        <el-input v-model="formInline.projectName" placeholder="请输入项目点名称" />
      </el-form-item> -->
      <el-form-item label="设备名称：">
        <el-input
          v-model="formInline.equipName"
          placeholder="请输入设备设备名称"
        />
      </el-form-item>
      <el-form-item label="设备厂家：">
        <el-input
          v-model="formInline.equipmentFacturers"
          placeholder="请输入设备厂家"
        />
      </el-form-item>

      <el-form-item label="信息更新时间：">
        <el-date-picker
          v-model="formInline.bindTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="">
             <el-button type="primary" @click="search"
          ><el-icon style="margin-right: 6px"><Search /></el-icon>
          搜索</el-button
        >
        <el-button @click="reset"
          ><el-icon style="margin-right: 6px"><Refresh /></el-icon>
          重置</el-button
        >
        <vue3-json-excel
          :fields="json_fields"
          :name="userExcelName"
          :fetch="downloadEx"
          style="margin-left: 12px"
        >
        <el-button>
            <!-- <el-icon style="margin-right: 6px"><Document /></el-icon> -->
            <img
              style="margin-right: 6px; width: 12px"
              src="@/images/daochu.png"
              alt=""
            />

            导出</el-button
          >
        </vue3-json-excel>
      </el-form-item>
    </el-form>
    <div style="text-align: right; margin-top: 5px;">
      <el-button type="primary" @click="addBind"><el-icon><Plus /></el-icon>设备绑定</el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :header-cell-style="{ backgroundColor: '#EEF6FF' }"
      stripe
      border
      height="calc(100% - 170px)"
      style="width: 100%; margin-top: 10px"
      >>

      <el-table-column label="序号" align="center" width="60px" type="index" />
      <el-table-column label="设备SN号" align="center" prop="devid">
        <template #default="{row}">
            <span style="color: #409eff; cursor: pointer;" @click="viewLog(row)">{{ row.devid }}</span>
          </template>
      </el-table-column>
      <el-table-column label="信息更新时间" align="center" prop="updateTime" />
      <el-table-column label="绑定时间" align="center" prop="reqtime1" />
      <!-- <el-table-column label="探头SN号" align="center" prop="t_sn" /> -->
      <el-table-column label="设备名称" align="center" prop="devname" />
      <el-table-column label="设备厂家" align="center" prop="company">
        <template #default="{ row }">
          {{ row.company ? row.company : "飞依诺" }}
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center" prop="project" />
      <el-table-column label="项目点名称" align="center" prop="insname" />
      <el-table-column label="设备状态" align="center" prop="equipStat">
        <template #default="{row}">
          <span>{{ row.inscode == 'INS00001' ? '闲置' : '在用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button type="text" @click="deletBind(row)">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageList.current"
      v-model:page-size="pageList.size"
      :page-sizes="[20, 40, 60, 80]"
      small="small"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageList.total"
      class="pagination-css"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      v-model="bingVisible"
      width="800px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <span>{{ "设备绑定" }}</span>
      </template>
      <el-form :model="bindForm" inline>
        <el-form-item label="设备名称：">
          <el-input
            v-model="bindForm.equipName"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="探头SN号：">
          <el-input
            v-model="bindForm.probeSN"
            placeholder="请输入探头SN号"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="设备厂家：">
          <el-input
            v-model="bindForm.equipManufacturers"
            placeholder="请输入设备厂家"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目点名称：">
          <el-input
            v-model="bindForm.projectName"
            placeholder="请输入项目点名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="" @click="bingVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="equipVisible"
      width="800px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <span>{{ "设备SN号：" + equipNumber }}</span>
      </template>
      <el-table
        :data="equipData"
        :header-cell-style="{ backgroundColor: '#EEF6FF' }"
      >
        <el-table-column label="操作时间" align="center" prop="reqtime1" />
        <!-- <el-table-column label="探头SN号" align="center" prop="sn" /> -->
        <el-table-column label="设备厂家" align="center" prop="company" />
        <el-table-column label="项目类型" align="center" prop="devtype" />
        <el-table-column label="项目点名称" align="center" prop="insname" />
        <el-table-column label="操作类型" align="center" prop="operation" />
      </el-table>
      <el-pagination
        v-model:current-page="equipList.current"
        v-model:page-size="equipList.size"
        :page-sizes="[20, 40, 60, 80]"
        small="small"
        layout="total, sizes, prev, pager, next, jumper"
        :total="equipList.total"
        class="pagination-css"
        @size-change="equipHandleSizeChange"
        @current-change="equipHandleCurrentChange"
      />
    </el-dialog>

    <el-dialog
      v-model="deletVisible"
      width="500px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <span>{{ "解除绑定" }}</span>
      </template>
      <el-form inline>
        <el-form-item label="设备SN号：">
          <span>{{ deletInfo.devid }}</span>
        </el-form-item>
        <el-form-item label="项目点名称：">
          <span>{{ deletInfo.insname }}</span>
        </el-form-item>
        <el-form-item label="解绑时间：">
          <el-date-picker
            v-model="deletTime"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="" @click="deletVisible = false">取消</el-button>
        <el-button type="primary" @click="deletSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDeviceList,
  getDeviceGroup,
  AddDeviceWeb,
  deleteDevice,
  getDevLogList,
} from "@/apis/equipmentManagement";
import format from "@/utils/format";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      fullscreenLoading: false,
      json_fields: {
        序号: {
          field: "index",
          callback: (value) => {
            return String(value);
          },
        },
        设备SN号: {
          field: "devid",
          callback: (value) => {
            return String(value);
          },
        },
        信息更新时间: {
          field: "updateTime",
          callback: (value) => {
            return String(value);
          },
        },
        // 探头SN号: {
        //   field: "t_sn",
        //   callback: (value) => {
        //     return String(value);
        //   },
        // },
        设备名称: {
          field: "devname",
          callback: (value) => {
            return String(value);
          },
        },
        设备厂家: {
          field: "company",
          callback: (value) => {
            return String(value);
          },
        },
        项目类型: {
          field: "project",
          callback: (value) => {
            return String(value);
          },
        },
        项目点名称: {
          field: "insname",
          callback: (value) => {
            return String(value);
          },
        },
        '设备状态': {
          field: 'auditText',
          callback: value => {
            return String(value)
          }
        }
      },
      userExcelName: "",
      equipNumber: "",
      formInline: {
        projectName: "",
        equipmentSn: "",
        equipmentFacturers: "",
        bindTime: [],
      },
      tableLoading: false,
      tableData: [],
      pageList: {
        current: 1,
        size: 20,
        total: 0,
      },
      bingVisible: false,
      bindForm: {
        equipName: '',
        equipSN: "",
        probeSN: "",
        equipManufacturers: "",
        projectName: "",
      },
      equipVisible: false,
      equipData: [],
      deletVisible: false,
      deletInfo: null,
      deletTime: "",
      equipList: {
        current: 1,
        size: 20,
        total: 0,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async downloadEx() {
      let inspecSTime = "";
      let inspecETime = "";
      let data = [];
      this.fullscreenLoading = true;
      if (this.formInline.bindTime && this.formInline.bindTime.length > 0) {
        inspecSTime = this.formInline.bindTime[0];
        inspecETime = this.formInline.bindTime[1];
        this.userExcelName =
          "超声设备绑定记录表" + inspecSTime + "~" + inspecETime;
        let res = await getDeviceGroup({
          page: 1, // 当前页
          size: 10000, // 每页size
          uname: this.$store.getters.name,
          inscode: this.$store.getters.inscode,
          bindStm: this.formInline.bindTime
            ? this.formInline.bindTime[0]
              ? this.formInline.bindTime[0]
              : ""
            : "",
          bindEtm: this.formInline.bindTime
            ? this.formInline.bindTime[1]
              ? this.formInline.bindTime[1]
              : ""
            : "",
          projectName: this.formInline.projectName
            ? this.formInline.projectName
            : "",
          devsn: this.formInline.equipmentSn ? this.formInline.equipmentSn : "",
          company: this.formInline.equipmentFacturers
            ? this.formInline.equipmentFacturers
            : "",
        });
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((el, index) => {
              let auditText = "";
              el.index = index + 1;
              if (el.inscode == "INS00001") {
                auditText = "闲置";
              } else {
                auditText = "在用";
              }
              el.auditText = auditText;
              let updateTime = "";
              if (el.mtime == 0) {
                updateTime = format(
                  (el.ctime ? el.ctime : 0) * 1000,
                  "YYYY-MM-DD HH:mm:ss"
                );
              } else {
                updateTime = format(
                  (el.mtime ? el.mtime : 0) * 1000,
                  "YYYY-MM-DD HH:mm:ss"
                );
              }
              el.updateTime = updateTime;
              el.reqtime1 = format(el.reqtime * 1000, "YYYY-MM-DD HH:mm:ss");
            });
            data = res.data;
          }
        }
        this.fullscreenLoading = false;
        return data;
      } else {
        ElMessage({
          message: "请选择信息更新时间",
          type: "warning",
        });
        this.fullscreenLoading = false;
        return data;
      }
    },
    search() {
      this.init();
    },
    reset() {
      this.formInline.projectName = "";
      this.formInline.equipName = "";
      this.formInline.equipmentSn = "";
      this.formInline.equipmentFacturers = "";
      this.formInline.bindTime = [];
      this.pageList.current = 1;
      this.getTabledata();
    },
    init() {
      this.pageList.current = 1;
      this.getTabledata();
    },
    getTabledata() {
      this.tableLoading = true;
      this.tableData = [];
      getDeviceGroup({
        page: this.pageList.current, // 当前页
        size: this.pageList.size, // 每页size
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        bindStm: this.formInline.bindTime
          ? this.formInline.bindTime[0]
            ? this.formInline.bindTime[0]
            : ""
          : "",
        bindEtm: this.formInline.bindTime
          ? this.formInline.bindTime[1]
            ? this.formInline.bindTime[1]
            : ""
          : "",
        projectName: this.formInline.projectName
          ? this.formInline.projectName
          : "",
        // devsn: this.formInline.equipmentSn ? this.formInline.equipmentSn : "",
        devname: this.formInline.equipName ? this.formInline.equipName : "",
        company: this.formInline.equipmentFacturers
          ? this.formInline.equipmentFacturers
          : "",
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((el) => {
              let updateTime = "";
              if (el.mtime == 0) {
                updateTime = format(
                  (el.ctime ? el.ctime : 0) * 1000,
                  "YYYY-MM-DD HH:mm:ss"
                );
              } else {
                updateTime = format(
                  (el.mtime ? el.mtime : 0) * 1000,
                  "YYYY-MM-DD HH:mm:ss"
                );
              }
              el.updateTime = updateTime;
              el.reqtime1 = format(el.reqtime * 1000, "YYYY-MM-DD HH:mm:ss");
            });
            this.tableData = res.data;
          }
          this.tableLoading = false;
          this.pageList.total = res.size;
        }
      });
    },
    addBind() {
      this.bindForm.equipSN = "";
      this.bindForm.equipName = "";
      this.bindForm.probeSN = "";
      this.bindForm.equipManufacturers = "";
      this.bindForm.projectName = "";
      this.bingVisible = true;
    },
    submit() {
      let newDate = new Date().getTime() / 1000;
      let data = {
        company: this.bindForm.equipManufacturers,
        ctime: newDate,
        devid: '',
        devname: this.bindForm.equipName,
        devtype: null,
        insname: this.bindForm.projectName,
        openid: null,
        reqtime: newDate,
        sn: this.bindForm.probeSN,
      };
      AddDeviceWeb({
        inscode: this.$store.getters.inscode,
        uname: this.$store.getters.name,
        data: JSON.stringify(data),
      }).then((res) => {
        if (res.code == 0) {
          ElMessage({
            message: "绑定成功",
            type: "success",
          });
          this.init();
          this.bingVisible = false;
        }
      });
    },
    deletBind(row) {
      this.deletInfo = null;
      this.deletTime = "";
      this.deletInfo = row;
      this.deletTime = format(new Date().getTime(), 'YYYY-MM-DD')
      this.deletVisible = true;
    },
    deletSubmit() {
      deleteDevice({
        uname: this.deletInfo.uname ? this.deletInfo.uname : "",
        inscode: this.deletInfo.inscode ? this.deletInfo.inscode : "",
        devid: this.deletInfo.devid ? this.deletInfo.devid : "",
        untieTime: this.deletTime ? this.deletTime : "",
      }).then((res) => {
        if (res.code == 0) {
          this.deletVisible = false;
          ElMessage({
            message: "解绑成功",
            type: "success",
          });
          this.init();
        }
      });
    },
    handleSizeChange(val) {
      this.pageList.current = 1;
      this.pageList.size = val;
      this.getTabledata();
    },
    handleCurrentChange(val) {
      this.pageList.current = val;
      this.getTabledata();
    },
    equipHandleSizeChange(val) {
      this.equioList.current = 1;
      this.equioList.size = val;
      this.getEquipData();
    },
    equipHandleCurrentChange(val) {
      this.equioList.current = val;
      this.getEquipData();
    },
    viewLog(row) {
      this.equipNumber = row.devid;
      this.getEquipData();
    },
    getEquipData() {
      this.equipLoading = true;
      this.equipData = [];
      getDevLogList({
        page: this.pageList.current, // 当前页
        size: this.pageList.size, // 每页size
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        bindStm: "",
        bindEtm: "",
        projectName: "",
        company: "",
        devsn: this.equipNumber,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((el) => {
              el.reqtime1 = format(el.reqtime * 1000, "YYYY-MM-DD HH:mm:ss");
            });
            this.equipData = res.data;
            console.log(this.equipData, "this.equipData");
          }
          this.equipLoading = false;
          this.equipList.total = res.size;
          this.equipVisible = true;
        } else {
          ElMessage({
            message: "服务器出错",
            type: "error",
          });
        }
      });
    },
  },
};
</script>